// head
let projectHead = (function () {
    let $head = $('.headW '),
        $headWrapper = $('.headWrapper'),
        $logo = $head.find('.logo'),
        $headUl = $head.find('ul'),
        $tr = $($headUl[0]).find('span'),
        $li = $($headUl[0]).children('li'),
        $login = $('.login');
    // console.log($tr.eq(0),$li.eq(1))
    let head = function head() {
        $head.addClass('active');
        $logo.addClass('active');
        $li.addClass('active');
        $login.addClass('active');
        $headWrapper.removeClass('tr');
        $($tr[0]).addClass('active');
        $li.each((index, item) => {
            $(item).on('mouseover', function () {
                $(this).toggleClass('hov');
                if (index == 1) {
                    $($tr[0]).toggleClass('hov');
                }
            });
            $(item).on('mouseout', function () {
                $(this).toggleClass('hov');
                if (index == 1) {
                    $($tr[0]).toggleClass('hov');
                }
            });
        })
        // $li.on('mouseover', function () {
        //     $(this).toggleClass('hov');
        //     console.log(this, index)
        //     if (this == $li.eq(1)) {
        //         console.log('ssss')
        //     }
        //     $($tr[0]).toggleClass('hov');
        // })
        // $li.on('mouseout', function () {
        //     $(this).toggleClass('hov');
        //     $($tr[0]).toggleClass('hov');
        // })

        if (document.documentElement.scrollTop < 81) {
            $head.removeClass('active');
            $headWrapper.addClass('tr');
            $logo.removeClass('active');
            $li.removeClass('active');
            $li.removeClass('hov');
            $login.removeClass('active');
            $($tr[0]).removeClass('active');
        }

    }
    return {
        init() {
            $(window).on('scroll', function () {
                head();
            })
        }
    }
})();
projectHead.init();

//头部的选项卡
let head = (function () {
    let $cartLeft = $('.cartLeft'),
        $lis = $cartLeft.children('li'),
        $cartRight = $('.cartRight'),
        $ul = $cartRight.children('ul');
    $lis.each((index, item) => {
        let $item = $(item)
        $item.on('mouseover', function () {
            $item.addClass('active').siblings().removeClass('active');
            $ul.eq(index).addClass('active').siblings().removeClass('active');
        });
    });
})();

// 中间轮播图部分
let projectCarousel = (function () {
    let $carousel = $('.carousel'),
        $ul = $carousel.children('ul');
    $ul.on('mouseover', function (ev) {
        let cli = ev.pageX;
        if (cli < 600) {
            $ul.css({
                transform: `translate(-${cli}px, 0px)`,
                transition: ' all .3s ease'
            });
        } else {
            $ul.css({
                transform: `translate(-${cli + 190}px, 0px)`,
                transition: ' all .3s ease'
            });
        }
    });
})();

// 箭头轮播
let carousel1 = (function carousel1() {
    let $Carousel1 = $('.Carousel1'),
        $CarouselList = $('.Carousel1 li'),
        $changeLeft = $('.changeLeft'),
        $changeRight = $('.changeRight');
    let step = 0,
        len = $CarouselList.length;
    // change 实现切换
    function change() {
        let $cur = $CarouselList.eq(step),
            $pre = $CarouselList.eq(prev);
        $cur.css('zIndex', 1);
        $pre.css('zIndex', 0);
        $cur.css({
            transitionDuration: '.3s',
            opacity: 1,
            animation: `bounceInRight .5s linear `,
        }).one('transitionend', () => {
            $pre.css({
                transitionDuration: '0.6s',
                opacity: 0,
                animation: `bounceInLeft .5s  linear`,
            });
        });
        // $cur.css({
        //     zIndex:1,
        //     animation: `bounceInRight .5s linear `,
        // }).one('transitionend', () => {
        //     $pre.css({
        //         zIndex:0,
        //         animation: `bounceInLeft .5s  linear`,
        //     });
        // });
    }
    function autoMove() {
        prev = step;
        step++;
        if (step > (len - 1)) {
            step = 0
        }
        change();
    }
    $changeRight.on('click', autoMove);
    $changeLeft.on('click', function () {
        prev = step;
        step--;
        step < 0 ? step = len - 1 : null;
        change();
    });

})();

// 焦点轮播
let carousel2 = (function carousel2() {
    let $rightWrapper = $('.rightWrapper'),
        $slider = $rightWrapper.find('.slider'),
        $pagination = $('.pagination'),
        $list = $pagination.find('li');
    let step = 0,
        len = $slider.length;
    // CHANGE实现切换
    function change() {
        let $cur = $slider.eq(step),
            $pre = $slider.eq(prev);
        $cur.css('zIndex', 1);
        $pre.css('zIndex', 0);

        $cur.css({
            animation: `bounceInRight .5s linear `,
            transitionDuration: '.3s',
            opacity: 1
        }).one('transitionend', () => {
            $pre.css({
                animation: `bounceInLeft .5s linear `,
                transitionDuration: '0s',
                opacity: 0
            });
        });

        // 焦点自动对齐
        $list.each((index, item) => {
            if (index === step) {
                $(item).addClass('active');
                return;
            }
            $(item).removeClass('active');
        });
    }
    // 点击焦点切换
    $list.on('click', function () {
        //  $(this).index() 当前点击这一项的索引
        let index = $(this).index();
        if (index === step) return;
        prev = step;
        step = index;
        change();
    });


})();


// 选项卡
let example = (function example() {
    let $list = $('.list'),
        $lists = $list.children('li'),
        $conList = $('.conList'),
        $conLists = $conList.children('ul');
    // console.log($lists,$conLists)

    $lists.each((index, item) => {
        let $item = $(item);
        $item.on('mouseenter', function () {
            change(index);
        })
    });
    function change(index) {
        for (let i = 0; i < $lists.length; i++) {
            $lists[i].className = '';
            $conLists[i].className = '';
        }
        $lists[index].className = 'active';
        $conLists[index].className = 'activeC';
    }
})();

// 图片滚动
let imgLeft = (function imgLeft() {
    let $conList = $('.conList'),
        $conLists = $conList.children('ul'),
        $li = $($conLists[4]).children('li'),
        $img = $li.children('img');
    // 得到li的高度 滚过去的高度
    let H = getComputedStyle($li[0]).height

    $li.each((index, item) => {
        let flag = false;
        item.onmousemove = function (ev) {
            flag = true;
            let cli = ev.clientY;
            // console.log(cli)
            $($img[index]).css({
                transform: `matrix(1, 0, 0, 1, 0, ${-cli})`,
                transition: ' all .5s ease'
            });
            item.onmouseleave = function () {
                $($img[index]).css({
                    transform: `matrix(1, 0, 0, 1, 0, 0)`,
                    transition: ' all 0s ease'
                });
            }
        }

        // item.onmouseout=1;
        // item.onmouseover = function (ev) {
        //     if (flag) {
        //         let H = parseFloat(getComputedStyle($li[index]).height),
        //             H2 = parseFloat(getComputedStyle($img[index]).height),
        //             T = parseFloat(getComputedStyle($img[index]).top);
        //         let timer = setInterval(function () {
        //             T++
        //             $($img[index]).css({
        //                 top: -T + 'px',
        //                 transition: ' all .5s ease'
        //             });
        //             console.log('2')
        //         }, 10)
        //     }
        // }

    });
})();

//底部选项卡
let link = (function link() {
    let $linkList = $('.linkList'),
        $linkLists = $linkList.children('li'),
        $linkCon = $('.linkCon'),
        $linkCons = $linkCon.children('li');
    // console.log($linkLists,$linkCons)
    $linkLists.each((index, item) => {
        let $item = $(item);
        $item.on('mouseenter', function () {
            change(index);
        });
    });
    // 切换类名函数
    function change(index) {
        for (let i = 0; i < $linkCons.length; i++) {
            $linkCons[i].className = '';
            $linkLists[i].className = '';
        }
        $linkCons[index].className = 'activeCon';
        $linkLists[index].className = 'activeLi';
    }
})();

// 数字加载 & 刚开始第一次加载出现上滑效果
let info = (function () {
    let $introduceW = $('.introduceW'),
        $introduceFoot = $('.introduceFoot'),
        $exampleW = $('.exampleW'),
        $mouthWrapper = $('.mouthWrapper');
    let A = $(window).outerHeight() + $(window).scrollTop();
    // 千分符方法
    function millimeter(num) {
        num = num.toString();
        return num.replace(/\d{1,3}(?=(\d{3})+$)/g, value => {
            return value + ',';
        });
    }
    function numFunc() {
        // if (flag) return
        let $infoWrapper = $('.infoWrapper'),
            $num = $infoWrapper.find('h3'),
            $span = $num.find('span');

        let num1 = 0,
            num2 = 0,
            num3 = 0,
            num4 = 0;
        // var flag = false;

        let fn1 = function fn1() {
            // flag = true;
            num1 += 100000;
            $span[0].innerText = millimeter(num1);
            if (parseFloat(num1) == 15000000) {
                num1 = 15000000;
                clearInterval(timer1);
            }
        }
        let fn2 = function fn2() {
            num2 += 100;
            $span[1].innerText = num2;
            if (parseFloat(num2) == 8000) {
                num2 = 8000;
                clearInterval(timer2);
            }
        }
        let fn3 = function fn3() {
            num3 += 150000;
            $span[2].innerText = millimeter(num3);
            if (parseFloat(num3) >= 50000000) {
                num3 = 50000000;
                clearInterval(timer3);
            }
        }
        let fn4 = function fn4() {
            num4 += 1;
            $span[3].innerText = num4;
            if (parseFloat(num4) == 100) {
                num4 = 100;
                clearInterval(timer4);
            }
        }
        var timer1 = setInterval(fn1, 10);
        var timer2 = setInterval(fn2, 10);
        var timer3 = setInterval(fn3, 1);
        var timer4 = setInterval(fn4, 10);
        // }
    }
    let flag = true,
        iFlag = true,
        fFlag = true,
        mFlag = true,
        eFlag = true;
    $(window).on('scroll', function () {
        let A = $(window).outerHeight() + $(window).scrollTop();
        if (A > 1580) {
            if (iFlag) {
                $introduceW.eq(0).css({
                    top: '0px',
                    transition: `top .8s`
                });
                iFlag = false;
            }
        }
        if (A > 2150) {
            if (fFlag) {
                $introduceFoot.css({
                    top: '0px',
                    transition: `top .8s`
                });
                fFlag = false;
            }
        }
        if (A > 3720 && A < 3900) {
            if (flag) {
                numFunc();
                flag = false;
            }
        }
        if (A > 2600) {
            if (eFlag) {
                $exampleW.css({
                    top: '0px',
                    transition: `top .8s`
                });
                eFlag = false;
            }
        }
        if (A > 3970) {
            if (mFlag) {
                $mouthWrapper.css({
                    top: '0px',
                    transition: `top .8s`
                });
                mFlag = false;
            }

        }
    });
})();



